<template>
	<view>
		<view class="content">
			<navigator url="/pages/cart/address">
				<view class="name" v-if="list.length==0">
					<view class="wrapper">
						<image src="../../../static/img/order/order.jpg" mode="" class="top_image"></image>
						<view class="un_address">
							<view class="">
								设置收货地址
							</view>
							<image src="../../../static/img/center/arrow.png" style="width: 20rpx;height: 20rpx;">
							</image>
						</view>
					</view>
				</view>
			</navigator>
			<u-action-sheet :show="show" @close="show=false" closeable title="选择收货地址">
				<view v-for="(item,index) in list" :key="item.id" class="address_list"
					@click="handleSelectAddress(item.id,index)" :class="{active:current == index}">
					<u-icon name="map" class="map" color="#e93323" size="28" v-if="current == index"></u-icon>
					<view class="ads_detail">
						<text>{{item.real_name}}</text>
						<text style="margin-left: 30rpx;">{{item.phone}}</text>
					</view>
					<view class="address_detail">
						{{item.province}}{{item.city}}{{item.district}}{{item.detail}}
					</view>
					<u-icon class="checkbox-mark" name="checkbox-mark" color="#e93323" size="28"
						v-if="current == index"></u-icon>
				</view>
				<u-button text="选择其他地址" color="#E93323" @click="handleAddDetail" class="add_ress"></u-button>
			</u-action-sheet>
			<view class=" name" v-if="list.length!==0" @click="show = true">
				<view class="wrapper">
					<image src="../../../static/img/order/order.jpg" mode="" class="top_image"></image>
					<view class="add_name">
						<text v-if="address_list.is_default ==1 ">{{ address_list.real_name}}</text>
						<view class="default">
							<view>{{address_list.phone}}</view>
							<view class="button" v-if="address_list.is_default==1">默认</view>
						</view>
					</view>
					<view class="address_tip">
						{{address_list.province}}{{address_list.city}}{{address_list.district}}{{address_list.detail}}
					</view>
					<image src="../../../static/img/center/arrow.png" class="select_address">
				</view>
			</view>
			<view class="info">
				<view class="store" v-for="item in order" :key="item.id">
					<image :src="item.productInfo.image" mode=""></image>
					<view class="store_detail">
						<view style="font-size: 26rpx;">{{item.productInfo.store_name}}</view>
						<view class="num">
							<view style="font-size: 24rpx;color: #999;">
								{{item.productInfo.attrInfo.suk}}
							</view>
							<text>x {{item.cart_num}}</text>
						</view>
						<view style="font-size: 24rpx;color: #c55a5c;margin-top: 15rpx;">￥{{item.productInfo.price}}
						</view>
					</view>
					<view style="clear: both;"></view>
				</view>
				<view class="all_price">
					<view class="">
						商品合计
					</view>
					<view style="color: #c55a5c;">
						￥256.00
					</view>
				</view>
				<view class="all_price">
					<view class="">
						运费
					</view>
					<view style="color: #c55a5c;">
						￥00.00
					</view>
				</view>
				<view class="all_price">
					<view class="">
						优惠券：未选择
					</view>
					<view>
						0张
					</view>
				</view>
				<view class="mark">
					<view style="font-size: 26rpx;">
						备注:
					</view>
					<view class="input">
						<u--input placeholder="填写备注" border="0"></u--input>
					</view>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="price">
				合计：￥0.000
			</view>
			<view class="get_order" @click="handleOrder">
				下单
			</view>
		</view>
	</view>
</template>

<script>
	import { cart } from '@/api'
	export default {
		data() {
			return {
				order: [],
				product_id: '',
				address_id: '',
				address_list: [],
				show: false,
				list: [],
				current: 0,
				icon: false,
				addressId: '',
				form: {
					addressId: 0,
					cartId: '',
					new: 0,
					shipping_type: 1
				},
				ads_id: '',
				order_code: {
					addressId: '',
					couponId: 0,
					payType: "",
					shipping_type: 1,
					useIntegral: 0
				},
				key: ''
			}
		},
		methods: {
			// 加载订单列表
			async load_order() {
				this.form.cartId = this.product_id
				let { status, data } = await cart.order({ ...this.form })
				if (status) {
					this.order = data.cartInfo
					this.key = data.orderKey
				}
			},
			// 加载默认地址
			async load_address() {
				let { status, data } = await cart.default_address({})
				if (status) {
					this.address_list = data

				}
			},
			// 加载地址列表
			async load_address_list() {
				let { status, data } = await cart.address_list({ page: 1, limit: 5 })
				if (status) {
					this.list = data
				}
			},
			//选择其他地址
			async handleSelectAddress(id, index) {
				this.current = index
				this.address_id = id
				let { msg, data, status } = await cart.order_address(this.address_id)
				if (status) {
					this.address_list = data;
					this.load_order()
					this.load_order_code()
					this.show = false
				}
			},
			// 点击进入添加新地址
			handleAddDetail() {
				uni.navigateTo({
					url: '/pages/cart/address_list'
				})
				this.show = false
			},
			// 选择了那些商品
			async check_order() {
				let { data, status } = await cart.check_order({ cartId: this.form.cartId, new: 0 })
			},
			// 订单编号
			async load_order_code() {
				this.order_code.addressId = this.address_list.id
				let { status, data } = await cart.order_code({ ...this.order_code })
			},
			// 点击下单
			handleOrder() {
				uni.navigateTo({
					url: '/pages/user/order/set_order'
				})
			}
		},
		created() {
			this.load_order()
			this.load_address()
			this.load_address_list()
			this.check_order()
			this.load_order_code()
		},
		onLoad: function(option) {
			this.product_id = option.cartId
			this.address_id = option.addressId
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #f4f4f4;
	}



	.add_ress {
		border-radius: 50vw;
		margin: 40rpx auto;
		width: 90%;
		font-weight: 700;
	}

	.address_content {
		padding-top: 30rpx;
	}

	.active {
		color: red;
	}

	.address_list {
		position: relative;
		padding: 20rpx 40rpx 20rpx 100rpx;
		display: flex;
		flex-wrap: wrap;
		border-bottom: 1px solid #ddd;

		.map {
			position: absolute;
			left: 20rpx;
		}

		.checkbox-mark {
			position: absolute;
			right: 30rpx;
		}
	}

	.ads_detail {
		width: 100vw;
		display: flex;
		margin-bottom: 10rpx;
		font-weight: 600;
		font-size: 28rpx;
	}

	.address_detail {
		font-size: 24rpx;
	}

	.un_address {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 35rpx 10rpx;
		font-size: 28rpx;
	}

	.select_address {
		position: absolute;
		right: 40rpx;
		top: 70rpx;
		width: 20rpx;
		height: 20rpx;
	}

	.address {
		display: flex;
		justify-content: space-between;
		padding: 31rpx 21rpx 30rpx 21rpx;
		border-top: 2px solid #ddd;
		background-color: #fff;
	}

	.name {
		padding: 17rpx 21rpx;
		background-color: #f4f4f4;
	}

	.name .top_image {
		width: 100%;
		height: 6rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.wrapper {
		position: relative;
		background-color: #fff;
		box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
		padding: 10px;

		.address_tip {
			font-size: 24rpx;
			color: #666;
			margin-top: 41rpx;
		}

		.button {
			width: 70rpx;
			height: 30rpx;
			border: 1px solid #c55a5c;
			font-size: 20rpx;
			color: #c55a5c;
			text-align: center;
			border-radius: 10rpx;
			margin-left: 24rpx;
		}

		.default {
			display: flex;
			align-items: center;
		}
	}

	.wrapper .add_name {
		display: flex;
		justify-content: space-between;
	}

	.info {
		padding: 0 21rpx;
		background-color: #fff;
	}

	.store {
		background-color: #fff;
		border-bottom: 1px solid #ddd;
		padding: 21rpx 0;

		image {
			width: 160rpx;
			height: 161rpx;
			margin-left: 30rpx;
			margin-right: 24rpx;
			float: left;
		}

		.store_detail {
			padding-top: 18rpx;
		}

		.num {
			display: flex;
			margin-top: 15rpx;

			text {
				margin-left: 40rpx;
				font-size: 26rpx;
				color: #999;
			}
		}
	}

	.all_price {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ddd;
		padding: 35rpx 26rpx 39rpx 21rpx;
		font-size: 26rpx;
	}

	.mark {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0 20rpx 21rpx;

		.input {
			width: 90%;
			border-bottom: 1px solid #ddd;
			font-size: 26rpx;
		}
	}

	.order {
		position: fixed;
		width: 100%;
		height: 97rpx;
		bottom: 0;
		left: 0;
		display: flex;
		border-top: 2px solid #ddd;
		justify-content: space-between;
		align-items: center;
		background-color: #fbfbfb;
		padding-left: 20rpx;

		.price {
			font-style: 28rpx;
			color: #c55a5c;
			margin-right: 20px;
		}

		.get_order {
			text-align: center;
			width: 225rpx;
			height: 100%;
			line-height: 97rpx;
			font-size: 28rpx;
			color: #fff;
			background-color: #c55a5c;
			cursor: pointer;
		}
	}
</style>